<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
  <style>
    body {
      background-color: #f8f9fa;
    }
    .register-link {
      display: block;
      margin-top: 10px;
      text-align: center;
    }
    .container {
      max-width: 500px;
      margin-top: 50px;
      background-color: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
  </style>
  <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
</head>
<body>
<div class="container mt-5">
  <h2 class="mb-4 text-center">登录</h2>
  <form id="loginForm">
    <div class="mb-3">
      <label for="username" class="form-label">用户名</label>
      <input type="text" class="form-control" id="username" required>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">密码</label>
      <input type="password" class="form-control" id="password" required>
    </div>
    <button type="submit" class="btn btn-primary w-100">登录</button>
  </form>
  <a href="/register" class="register-link">没有账号？去注册</a>
</div>

<script>


  $(document).ready(function() {
    $("#loginForm").submit(function(event) {
      event.preventDefault();
      let user = {
        username: $("#username").val(),
        password: $("#password").val()
      };

      $.ajax({
        url: '/login',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(user),
        success: function(response) {
          // 假设后端返回的数据格式是 { token: 'jwt_token' }
          const token = response.data;
          // 将token存储在本地存储中
          localStorage.setItem('jwtToken', token);
          alert('Login successful!');
          // 这里可以跳转到其他页面或者进行其他操作

          window.location.href="/myuser/init"
        },
        error: function(response) {
          alert("登录失败！");
        }
      });
    });
  });
</script>
</body>
</html>
